import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './index.module.css'
import { Button } from 'antd-mobile'
function Index() {
  let { state } = useLocation()
  let Navigate = useNavigate()
  const handleOrder = () => {
    // price=${state.price} & id=${state.id}
    Navigate(`/order`,{
      id:state.id,
      price:state.price
    })
  }

  return (
    <div>
      <div className={styles.list_box}>
        <div className={styles.list_left}>
          <span>{state.start}</span>
          <span>{state.startTime}</span>
          <span>{state.end}</span>
          <span>{state.endTime}</span>
        </div>
        <div className={styles.list_right}>
          <span>
            {state.price}
          </span>
        </div>
      </div>
      <div className={styles.list_btm}>
        <span style={{ color: 'red', fontSize: '25px' }}>{state.price}</span>
        <Button color='warning' onClick={() => handleOrder()}>提交订单</Button>
      </div>
    </div>
  )
}

export default Index
